// Porosidad.js
Application.Views.Porosidad = Application.Vista.extend({
    nombre: 'Porosidad',
    initialize: function () {
        this.collection.on('change', this.render, this);
		this.setElement($('#main-content'));
    },
    events: {
        'click .criterio': 'seleccionarCriterio',
        'click #filtro-porosidad': 'aplicarBusqueda',
        'change #Turno' : 'resetBusqueda'
    },
    
    resetBusqueda: function (e) {
        // Hacer reset cuando la opción múltiple tenga elegido como ninguno
        if ('Turno' === e.target.id && 0 == e.target.value) {
            this.render();
        }
    },
    
    aplicarBusqueda: function (e) {
        e.preventDefault();

        var data = this.collection.toJSON(),
            valor = this.$el.find('.busqueda-porosidad:visible').val(),
            criterio = this.$el.find('.criterio:checked').val(),
            datosFiltrados = _.filter(data, function (d) {
                return d[criterio].indexOf(valor) > -1;
            });

        this.renderPorosidad(datosFiltrados);
    },

    seleccionarCriterio: function (e) {
        // Esconder los criterio de busqueda
        this.$el.find('.busqueda-porosidad').addClass('hidden');

        // Elegir el bueno
        this.$el.find('.busqueda-porosidad[id="' + e.currentTarget.value + '"]').removeClass('hidden');
    },
    
    render: function () {
        var 
			data = this.collection.toJSON();

		this.$el.append(_.template(
            Application.Contenido.find('#porosidad-esqueleto').html()
        ));

        return this.renderPorosidad(data);
    },
    renderPorosidad: function (coleccion) {
        var plantilla = '';

        if (coleccion.length < 1) {
            this.$el.find('.listado tbody').html('No existen registros de porosidad');
            return this;
        }

        _.each(coleccion, function (model) {
            plantilla += _.template(
                Application.Contenido.find('#lista-porosidad').html(),
                model
            );
        });
        
        this.$el.find('.listado tbody').html(plantilla);
        
        return this;
    },
    onClose: function () {
        this.collection.off('change');
    }
});
